<!--
* description: 服务活动查询-备件
* author: wangjuan
* createdDate: 2021-3-11
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :key="oneTableKey"
      :dynamic-buttons="tableButtons"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="true"
      :dynamic-is-show-select="true"
      :dynamic-is-init-table="true"
      :dynamic-table-defult-height="tableHeight"
      :callback-obj="callbackObj"
      :is-show-pagination="false"
    />

    <!-- 其他选择 -->
    <otherInformation
      :key="editPopupsKey3"
      :dynamic-edit-row-data="otherEditRowData"
      :popups-visible-other="popupsVisibleOther"
      @close="close3"
      @returnOtherData="returnOtherData"
    />
  </div>
</template>
<script>

import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import Vue from 'vue'

export default {
  name: 'OtherProjection',

  components: {
    OneTableTemplate,
    // 弹窗
    otherInformation: () => import('./component/otherInformation.vue')
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],

  props: {

  },

  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, ''], function() {
      next()
    })
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {

      tableHeight: 300,
      editPopupsKey3: 'editPopupsKey3',
      otherEditRowData: {},
      popupsVisibleOther: false,
      otherDatas: [],
      selectOther: [],

      tableButtons: [
        {
          compKey: 'btnKey1',
          size: 'small',
          name: 'add',
          clickEvent: () => this.otherAddd(),
          text: '新增',
          position: 'right'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'cancel',
          clickEvent: () => this.deleteOther(),
          text: '删除',
          position: 'right'
        }
      ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'releaseId',
              label: '主键ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'repairOtherCode',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'repairOtherName',
              label: '其他项目名称'
            },
            {
              prop: 'otherTotalFee',
              label: '费用合计',
              isComponent: true,
              comps: [
                {
                  compKey: 'Key2',
                  codeField: 'otherTotalFee',
                  component: () =>
                    import('@/components/se/commonInput/priceNumInput'),
                  isInput: true,
                  dataToObject: {
                    min: 0
                  },
                  type: 'Number'
                }
              ]
            }
          ],

      // 表单查询数据
      formField: this.$utils.getFormField(this, {

      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode]),

      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selectOther = selection
        }
      }
    }
  },

  watch: {
    // otherDatas(val) {
    //   for (let i = 0; i < this.otherDatas.length; i++) {
    //     this.otherDatas[i].otherTotalFee = (Number((this.otherDatas[i].wiPrice * 100) / 100) * Number(this.otherDatas[i].saleWiQty)).toFixed(2)
    //     console.log(this.otherDatas[i].otherTotalFee)
    //   }
    // }
  },

  mounted() {
    // 列表查询
    this.queryTable(1)
  },

  methods: {
    // 工时新增
    otherAddd() {
      this.popupsVisibleOther = true
    },

    // 弹窗返回数据判断及转换字段
    returnOtherData(returnData) {
      const otherTableData = this.$refs.multipleTable.list
      for (let i = 0; i < otherTableData.length; i++) {
        if (otherTableData[i].repairOtherCode === returnData.repairOtherCode) {
          this.$message({
            message: '此条数据已添加！',
            duration: 1000
          })
          return
        }
      }
      this.$refs.multipleTable.list.push(returnData)
      this.otherDatas = this.$refs.multipleTable.list
    },

    // 删除
    deleteOther() {
      if (!this.selectOther.length) return this.$message('请先勾选删除数据！')
      for (const i of this.selectOther) {
        this.$refs['multipleTable'].list = this.$refs['multipleTable'].list.filter(
          (item) => item !== i
        )
      }
      this.otherDatas = this.$refs['multipleTable'].list
    },
    close3() {
      this.popupsVisibleOther = false
    }

  }
}
</script>
<style lang="scss" scoped>
/deep/.el-input-number--small {
  width: 160px;
}
/deep/.el-input-number--small .el-input__inner {
  padding-right: 0;
}
/deep/.el-input-number .el-input__inner {
  padding-left: 0;
}
/deep/.el-table .el-input--small .el-input__inner {
  height: 26px;
}
</style>

